<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui_v2/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/font-awesome/css/font-awesome.min.css">
</head>
<body>
<blockquote class="layui-elem-quote layui-form ">

    <form>
        <div class="layui-inline">
            <label class="layui-form-label">部门名称:</label>
            <div class="layui-input-inline">
                <select id="search_dept" lay-filter="search_dept" lay-search="">

                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">员工姓名:</label>
            <div class="layui-input-inline">
                <select id="search_name" lay-filter="search_name" lay-search="">
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 20px;">
            <button type="reset" id="clear_btn" class="layui-btn"><i class="layui-icon">&#x1006;</i>重置</button>
        </div>
        <div class="layui-inline" style="margin-left: 20px;">
            <button type="reset" id="add_btn" class="layui-btn"><i class="layui-icon">&#xe612;</i>添加客户</button>
        </div>
        <div class="layui-inline" style="margin-left: 20px;">
            <button type="reset" id="cusinfo_btn" class="layui-btn"><i class="layui-icon">&#xe612;</i>未删除客户</button>
        </div>
        <div class="layui-inline" style="margin-left: 20px;">
            <button type="reset" id="delinfo_btn" class="layui-btn"><i class="layui-icon">&#xe62e;</i>已删除客户</button>
        </div>
    </form>
</blockquote>

<%--表格--%>
<table id="cus_table" class="layui-table" lay-filter="cus_table"></table>

<script src="${pageContext.request.contextPath}/layui/layui_v2/layui.js"></script>
<script>
    layui.use(['table', 'jquery', 'layer', 'form'], function () {
        var $ = layui.jquery,
            table = layui.table,
            layer = layui.layer,
            form = layui.form;

        //计算表头的宽度
        var width = $(document.body).width();
        //部门表头的宽度
        var dept_width = (width) / 3 - 10;
        //员工表头的宽度
        var emp_width = (width) / 5 - 5;
        //客户表头的宽度
        var cus_width = (width) / 6 - 3;
        //已删除客户表头的宽度
        var cusres_width = (width) / 5 - 3;


        //部门表头
        var clos_dept = [[{
            field: "id", title: '编号', width: dept_width, sort: true, align: 'center'
        }, {
            field: 'name', title: '部门名称', width: dept_width, align: 'center'
        }, {
            title: '查询', width: dept_width, align: 'center', toolbar: '#barDept'
        }]];

        //员工表头
        var clos_emp = [[{
            field: "id", title: '编号', width: emp_width, sort: true, align: 'center'
        }, {
            field: 'truename', title: '员工姓名', width: emp_width, align: 'center'
        }, {
            field: 'sex', title: '性别', width: emp_width, align: 'center'
        }, {
            field: 'remark', title: '备注', width: emp_width, align: 'center'
        }, {
            title: '查看', width: emp_width, align: 'center', toolbar: '#barEmp'
        }]];

        //客户表头
        var clos_cus = [[{
            field: "id", title: '编号', width: cus_width, sort: true, align: 'center'
        }, {
            field: 'name', title: '客户姓名', width: cus_width, align: 'center'
        }, {
            field: 'tel', title: '联系方式', width: cus_width, align: 'center'
        }, {
            field: 'address', title: '地址', width: cus_width, align: 'center'
        }, {
            title: '修改', width: cus_width, align: 'center', toolbar: '#barCusEdit'
        }, {
            title: '删除', width: cus_width, align: 'center', toolbar: '#barCusDel'
        }]];

        //已删除客户表头
        var clos_cusres = [[{
            field: "id", title: '编号', width: cusres_width, sort: true, align: 'center'
        }, {
            field: 'name', title: '客户姓名', width: cusres_width, align: 'center'
        }, {
            field: 'tel', title: '联系方式', width: cusres_width, align: 'center'
        }, {
            field: 'address', title: '地址', width: cusres_width, align: 'center'
        }, {
            title: '恢复', width: cusres_width, align: 'center', toolbar: '#barCusRes'
        }]];


        //table 数据接口 查询所有的部门
        var tableUrl = '${pageContext.request.contextPath}/deptAction_pageQueryAllInfos.action';

        //方法级别渲染表格
        var tableIns = table.render({
            elem: '#cus_table'
            , id: 'cus_table_info'
            , height: 'auto'
            , cols: clos_dept
            , url: tableUrl
            , method: 'post'
            , page: true
            , limits: [7, 14, 20]
            , limit: 7
        });

        renderSelectDepts();//渲染部门下拉框

        renderSelectEmpNames();//渲染员工姓名下拉框


        //监听部门选择
        form.on('select(search_dept)', function (data) {
//            layer.msg(data.value);
            var detpid = data.value;
            //重新渲染表格
            findEmpByDeptid(detpid);
            //重新渲染姓名下拉框
            renderSelectEmpNames(detpid);
        });

        //监听员工姓名下拉框
        form.on('select(search_name)', function (data) {

            var empid = data.value;
            findCusByEmpid(empid);

        });

        //监听工具条
        table.on('tool(cus_table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'search_emp') {
                //根据部门id查询部门下所有的员工
                var id = data.id;
                findEmpByDeptid(id);

            } else if (layEvent === 'search_cus') {//查询客户
                var id = data.id;
                findCusByEmpid(id);
            } else if (layEvent === 'cus_edit') {//修改客户
//                layer.msg('修改')
                edit_customer(data.id);
            } else if (layEvent === 'cus_del') {//删除客户
//                layer.msg('删除')
                delete_customer(data.id);
            } else if (layEvent === 'cus_res') {//恢复客户
                layer.msg('恢复');
            }
        });

        //重置按钮事件
        $("#clear_btn").click(function () {
            tableIns.reload(
                {
                    url: tableUrl,
                    cols: clos_dept
                }
            );
        });

        //添加客户按钮点击事件
        $("#add_btn").click(function () {
//            layer.msg('添加客户');
            layer.open({
                type: 2,
                title: '<span style="color: #009688;font-size: 20px;">添加客户</span>',
                area: ['550px', '550px'],
                shadeClose: true,
                content: ['${pageContext.request.contextPath}/pages_customer_addCustomer.action', 'no']
            });
        });

        //查询已删除客户按钮点击事件
        $("#delinfo_btn").click(function () {
//            layer.msg('已删除客户');
            tableIns.reload(
                {
                    url: '${pageContext.request.contextPath}/customerAction_pageQuery.action?is=0',
                    cols: clos_cusres
                }
            );
        });

        //查询未删除客户按钮点击事件
        $("#cusinfo_btn").click(function () {
            tableIns.reload(
                {
                    url: '${pageContext.request.contextPath}/customerAction_pageQuery.action?is=1',
                    cols: clos_cus
                }
            )
        });


        //根据部门id查询部门下所有的员工
        function findEmpByDeptid(id) {
            //重载表格
            tableIns.reload(
                {
                    url: '${pageContext.request.contextPath}/empAction_empQuery.action?is=1&dept.id=' + id,
                    cols: clos_emp
                }
            );
        }

        // 查询员工下所有的客户
        function findCusByEmpid(id) {
            //重载表格
            tableIns.reload(
                {
                    url: '${pageContext.request.contextPath}/customerAction_pageQuery.action?is=1&emp.id=' + id,
                    cols: clos_cus
                }
            );
        }

        //渲染部门下拉框
        function renderSelectDepts() {
            //部门动态添加部门选择
            $.post("${pageContext.request.contextPath}/deptAction_findAllDeptNames.action", function (data) {

                var options = '<option value="">--请选择--</option>';

                for (var i = 0; i < data.length; i++) {
                    //拼字符串时千万不能出错，尤其是value不能有空格
                    options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                }
                $("#search_dept").append(options);

                form.render();
            });
        }

        //渲染员工姓名下拉框
        function renderSelectEmpNames(deptid) {
            $("#search_name").empty();
            var url = '${pageContext.request.contextPath}/empAction_findAllNames.action?is=1';

            if (deptid != null) {
                url += '&dept.id=' + deptid;
            }

//            layer.msg("url====" + url);
            //姓名选择
            $.post(url, function (data) {
                var options = '<option value="">--请选择--</option>';

                for (var i = 0; i < data.length; i++) {
                    //拼字符串时千万不能出错，尤其是value不能有空格
                    options += '<option value="' + data[i].id + '">' + data[i].truename + '</option>';
                }
                $("#search_name").append(options);

                form.render();
            });
        }

        //修改客户
        function edit_customer(cusid) {
            layer.open({
                type: 2,
                title: '<span style="color: #009688;font-size: 20px;">修改客户</span>',
                area: ['550px', '550px'],
                shadeClose: true,
                content: ['${pageContext.request.contextPath}/customerAction_beforeEdit.action?id=' + cusid, 'no']
            });
        }


        //删除客户
        function delete_customer(cusid) {

            layer.confirm('确定要删除此客户吗？', {icon: 3, title: '删除客户'}, function (index) {
                var url = '${pageContext.request.contextPath}/customerAction_delete.action';

                $.post(url, {id: cusid}, function (result) {
                    if (result === '1') {
                        layer.msg('删除成功');
                        layer.close(index);
                        tableIns.reload({});
                    } else {
                        layer.msg('删除异常');
                    }
                });

            });
        }


    });
</script>

<script type="text/html" id="barDept">
    <a class="layui-btn layui-btn-mini" lay-event="search_emp"><i class="layui-icon">&#xe615;</i>查询</a>
</script>
<script type="text/html" id="barEmp">
    <a class="layui-btn layui-btn-mini" lay-event="search_cus"><i class="layui-icon">&#xe615;</i>查询</a>
</script>
<script type="text/html" id="barCusEdit">
    <a class="layui-btn layui-btn-mini" lay-event="cus_edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>修改</a>
</script>
<script type="text/html" id="barCusDel">
    <a class="layui-btn layui-btn-mini" lay-event="cus_del"><i class="fa fa-trash" aria-hidden="true"></i>删除</a>
</script>
<script type="text/html" id="barCusRes">
    <a class="layui-btn layui-btn-mini" lay-event="cus_res"><i class="fa fa-recycle" aria-hidden="true"></i>恢复</a>
</script>

</body>
</html>
